<template>
	<view class="addzh">
		<headertop :title="title" str1="oridei" back1="#fff"></headertop>
		<view class="formsbox">
			<view class="itembox">
				<view class="name">
					名称：
				</view>
				<input type="text" v-model="query.account_name" placeholder="请输入名称" />
			</view>
			<view class="itembox">
				<view class="name">
					开户行：
				</view>
				<input type="text" v-model="query.account_header" placeholder="请输入开户行" />
			</view>
			<view class="itembox">
				<view class="name">
					银行卡号：
				</view>
				<input type="number" v-model="query.account_no" placeholder="请输入银行卡号" />
			</view>
			<view class="itembox">
				<view class="name">
					备注：
				</view>
				<input type="text" v-model="query.detail" placeholder="请输入备注" />
			</view>
			<view class="itembox">
				<view class="name">
					设为默认账户：
				</view>
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (17).png" mode=""
					@click="query.is_default=1" v-if="query.is_default==0">
				</image>
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x.png" @click="query.is_default=0"
					mode="" v-else>
				</image>
			</view>
		</view>
		<view class="qrtj" @click="qd">
			{{title == '编辑账户'?'保存':'确认添加'}}
		</view>
	</view>
</template>
<script setup>
	import headertop from '@/components/header.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		saveaccount,
		accountdetail
	} from '@/api/my.js'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const title = ref('添加账户')
	const query = reactive({
		account_header: '',
		account_name: '',
		account_no: '',
		type: 'bank',
		detail: '',
		is_default: 0,
		id: ''
	})
	onLoad((opt) => {
		if (opt.id) {
			title.value = '编辑账户'
			getinof(opt.id)
		} else {
			title.value = '添加账户'
		}
	})
	async function getinof(id) {
		const res = await accountdetail({
			id
		})
		if (res.code == 1) {
			var obj = res.data
			query.account_header = obj.account_header
			query.account_name = obj.account_name
			query.account_no = obj.account_no
			query.type = obj.type
			query.detail = obj.detail
			query.is_default = obj.is_default || 0
			query.id = obj.id
		}
	}
	async function qd() {
		for (var i in query) {
			if (i != 'detail' && i != 'id' && i != 'is_default') {

				if (!query[i]) {
					uni.showToast({
						title: '请补全信息后提交',
						icon: 'none'
					})
					return
				}
			}
		}
		const bankCardRegex = /^[1-9]\d{15,18}$/;
		if (bankCardRegex.test(query.account_no)) {} else {
			uni.showToast({
				title: '银行卡号格式错误',
				icon: 'none'
			})
			return
		}
		const res = await saveaccount(query)
		if (res.code == 1) {
			uni.navigateBack()
			var title = ''
			if (query.id) {
				title = '编辑成功'
			} else {
				title = '添加成功'
			}
			setTimeout(() => {
				uni.showToast({
					title,
					icon: 'none'
				})
			}, 500)
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.addzh {
		width: 100%;
		overflow: hidden;
		height: 100vh;
		position: relative;

		.qrtj {
			width: 686rpx;
			height: 82rpx;
			background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			position: absolute;
			margin: auto;
			margin-left: 32rpx;
			bottom: 100rpx;
		}

		.formsbox {
			width: 686rpx;
			margin: auto;
			margin-top: 204rpx;
			overflow: hidden;

			.itembox {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				height: 88rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-bottom: 28rpx;

				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 24rpx;
				}

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
					margin-left: 28rpx;
				}

				input {
					text-align: right;
					margin-right: 28rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>